<template>
  <div class="winning-number" v-if="!getIsPhone">
    <div class="info-left">
      <div class="icon">
        <lottery-icon :name="winningNumbers.lotteryName"></lottery-icon>
      </div>
      <div class="content">
        <div class="name">{{winningNumbers.lotteryName}}</div>
        <div class="series">
          当前
          <span>{{winningNumbers.dateNo}}</span>
          期
        </div>
      </div>
    </div>
    <div class="info-middle">
      <slot></slot>
    </div>
    <div class="info-right">
      <div class="right-item title">
        距
        <span>
          {{winningNumbers.dateNo}}
        </span>
        期开奖
      </div>
      <div class="right-item time">
        <!-- {{drawTime}} -->
        <count-down :timeStamp="winningNumbers.drawTime"></count-down>
      </div>
      <div class="right-item close-order">
        <span>
          封单：
        </span>
        <count-down-normal :timeStamp="winningNumbers.closeTime"></count-down-normal>
      </div>
    </div>
  </div>
  <div class="winning-number border-bottom" v-else>
    <div class="content-wrapper">
      <div class="top">
        <div class="date-no">
          <span>819048</span>
          <span>期</span>
        </div>
        <div class="number-bar">
          <text-bar :content="winningNumbers.previous.context"></text-bar>
        </div>
      </div>
      <div class="bottom">
        <div class="numbers">
          <slot>1234567</slot>
        </div>
      </div>
    </div>
    <div class="draw-time border-left">
      <div class="top">
        距<span>{{winningNumbers.dateNo}}</span>期开奖
      </div>
      <div class="count-down time">
        <count-down :timeStamp="winningNumbers.drawTime" :fontSize="16"></count-down>
      </div>
    </div>
  </div>
</template>

<script>
import LotteryIcon from '@/components/base/lottery-icon/lottery-icon'
import CountDown from '@/components/base/count-down/count-down'
import CountDownNormal from '@/components/base/count-down/count-down-normal'
import TextBar from '@/components/base/text-bar/text-bar'
import { mapGetters } from 'vuex'
export default {
  components: {
    LotteryIcon,
    CountDown,
    TextBar,
    CountDownNormal
  },
  props: {
    winningNumbers: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
    .middle-top-right >>> .bar
      background #fef5ef
    .middle-top-right >>> .content
      color $color-text-yellow 
      height 20px
    .winning-number
      display flex
      width 100%
      height 98px
      .info-left
        display flex
        width 220px
        height 98px
        align-items center
        .icon
          height 70px
          width 70px
          line-height 70px
          border-radius 50%
          margin 0 10px
          box-sizing border-box
          text-align center
        .icon >>> .icon  
          width 70px 
          height 70px 
          font-size 60px
        .content
          color: red
          color:rgba(43,48,66,1)
          .name
            font-size: 15px
            font-weight bold
            margin-bottom 5px
      .info-middle
        flex 1
        display flex
        flex-direction column
        border-left: 1px solid $color-divide-line
        border-right: 1px solid $color-divide-line
        justify-content center
        padding-left 20px
        box-sizing border-box
        .middle-top
          display flex
          align-items center
          .middle-top-right
            margin-left 20px
            .text-bar 
              display flex 
              align-items center 
              justify-content space-around
              width 204px 
              height 20px
              border-radius 10px
              border 1px solid $color-nav-border
              background-color $color-nav-bg
        .middle-bottom
          display flex
          .lottery-ball
            margin-right 10px
            margin-top 10px
      .info-right
        width 220px
        box-sizing border-box 
        padding-top 10px
        display flex 
        flex-direction column 
        justify-content space-around 
        .right-item
          &.title 
            text-align center 
          &.time
            display flex 
            justify-content center
          &.close-order
            margin-right 10px
            display flex 
            justify-content flex-end 
  @media screen and (max-width 750px)
    .winning-number
      display flex
      width 100%
      height 64px
      justify-content space-between
      align-items center
      box-sizing border-box 
      // padding-right 10px
      .content-wrapper
        display flex
        flex 1
        flex-direction column 
        height 48px
        justify-content space-around
        .top 
          display flex
          align-items center
          box-sizing border-box 
          padding-left 8px
          .number-bar
            margin-left 10px
        .bottom 
          margin-top 5px
          .numbers 
            box-sizing border-box 
      .draw-time 
        width 114px 
        text-align center
        height 48px
        box-sizing border-box 
        padding 0 6px
        display flex 
        justify-content space-around
        flex-direction column
        .top 
          font-size 13px 
        .time >>> .comma
          margin-right -5px 
          margin-left -5px 

      

        

    
</style>
